<template>
  <div class="DeviceStatistics">
    <div class="title">
      <Title> 智能设备统计 </Title>
    </div>
    <div class="body">
      <div class="_box one">
        <div class="logo"></div>
        <div class="info">
          <span class="top"
            ><span class="Num">{{ BaseInfo.monitorCount }}</span
            >个</span
          >
          <span class="bottom">监控摄像头</span>
        </div>
      </div>
      <div class="_box two">
        <div class="logo"></div>
        <div class="info">
          <span class="top"
            ><span class="Num">{{ BaseInfo.ledscreeCount }}</span
            >个</span
          >
          <span class="bottom">显示屏</span>
        </div>
      </div>
      <div class="_box three">
        <div class="logo"></div>
        <div class="info">
          <span class="top"
            ><span class="Num">{{ BaseInfo.voiceCount }}</span
            >个</span
          >
          <span class="bottom">音柱</span>
        </div>
      </div>
      <div class="_box four">
        <div class="logo"></div>
        <div class="info">
          <span class="top"
            ><span class="Num">{{ BaseInfo.lampLigtCount }}</span
            >个</span
          >
          <span class="bottom">照明</span>
        </div>
      </div>
      <div class="_box five">
        <div class="logo"></div>
        <div class="info">
          <span class="top"
            ><span class="Num">{{ BaseInfo.sosCount }}</span
            >个</span
          >
          <span class="bottom">一键呼叫</span>
        </div>
      </div>
      <div class="_box six">
        <div class="logo"></div>
        <div class="info">
          <span class="top"
            ><span class="Num">{{ BaseInfo.sosCount }}</span
            >个</span
          >
          <span class="bottom">运行中</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "./Title.vue";
import { GetBigScreenUrl } from "@/api/BigScreen";
export default {
  name: "DeviceStatistics",
  mounted() {
    GetBigScreenUrl().then((res) => {
      this.$store.commit("BigScreen/SET_Big_Screen_Info", res.data);
      this.BaseInfo = res.data.baseInfo;
    });
  },
  data() {
    return {
      BaseInfo: null,
    };
  },
  components: {
    Title,
  },
};
</script>

<style lang="scss" scoped>
.DeviceStatistics {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    flex: 1;
  }
  .body {
    width: 100%;
    flex: 6;
    display: grid;
    grid-template-columns: repeat(2, 1.875rem /* 150/80 */);
    grid-gap: 0 0.825rem /* 66/80 */;
    grid-template-rows: 1.0125rem /* 81/80 */ 1.0125rem /* 81/80 */ 1.0125rem /* 81/80 */;
    padding-top: 0.267125rem /* 21.37/80 */;
    padding-bottom: 0.3rem /* 24/80 */;
    ._box {
      display: flex;
      border-bottom: 1px solid rgba(39, 80, 121, 1);
      padding-top: 0.175rem /* 13.67/80 */;
      padding-left: 0.025rem /* 2/80 */;
      .logo {
        width: 0.575rem /* 46/80 */;
        height: 0.575rem /* 38.55/80 */;
      }
      .info {
        width: 0.875rem /* 70/80 */;
        height: 0.55775rem /* 44.62/80 */;
        display: flex;
        flex-direction: column;
        margin-left: 0.162875rem /* 13.03/80 */;
        .top {
          font-size: 0.1475rem /* 11.8/80 */;
          color: rgba(255, 255, 255, 1);
          .Num {
            font-size: 23.62px;
            color: rgba(10, 255, 231, 1);
            margin-left: -0.0375rem /* 3/80 */ /* 24/80 */;
            margin-right: 0.2rem /* 16/80 */ /* 35/80 */ /* 2/80 */;
          }
        }
        .bottom {
          font-size: 0.172625rem /* 13.81/80 */;
          color: rgba(213, 220, 232, 1);
          text-align: left;
          vertical-align: top;
        }
      }
    }
  }
  .one {
    border-top: 1px solid rgba(39, 80, 121, 1);

    .logo {
      background: url(../../../assets/Home/jiankong.png);
      background-size: 100% 100%;
    }
  }
  .two {
    border-top: 1px solid rgba(39, 80, 121, 1);
    .logo {
      background: url(../../../assets/Home/xianshiqi.png);
      background-size: 100% 100%;
    }
  }
  .three {
    .logo {
      background: url(../../../assets/Home/yinzhu.png);
      background-size: 100% 100%;
    }
  }
  .four {
    .logo {
      background: url(../../../assets/Home/zhaoming.png);
      background-size: 100% 100%;
    }
  }
  .five {
    .logo {
      background: url(../../../assets/Home/hujiao.png);
      background-size: 100% 100%;
    }
  }
  .six {
    .logo {
      background: url(../../../assets/Home/yunxing.png);
      background-size: 100% 100%;
    }
  }
}
</style>
